<template>
  <view class="wardrobe-container">
    <!-- 顶部图标和标题区域 -->
    <view class="header-section">
      <!-- 返回首页按钮 -->
      <view class="home-btn" @tap="navigateToHome">
        <text class="home-icon">🏠</text>
      </view>
      
      <view class="logo-container">
        <view class="logo-circle" style="background: transparent; width: 240rpx; height: 240rpx;">
          <image src="https://i.ibb.co/wFwYt0bj/today-s-recommendation.png" mode="aspectFit" style="width: 220rpx; height: 220rpx;"></image>
        </view>
      </view>
      <view class="title-container">
        <text class="sub-title">你的AI时尚穿搭助手</text>
      </view>
    </view>

    <!-- 功能卡片区域 -->
    <view class="feature-cards">
      <!-- AI智能试穿卡片 -->
      <view class="feature-card">
        <view class="card-icon pink">
          <text class="icon-emoji">👚</text>
        </view>
        <view class="card-content">
          <text class="card-title">AI智能试穿</text>
          <text class="card-desc">上传照片，AI智能换装，尽享时尚新体验</text>
        </view>
      </view>

            <!-- AI智能试穿卡片 -->
            <view class="feature-card">
        <view class="card-icon pink">
          <text class="icon-emoji">🌟</text>
        </view>
        <view class="card-content">
          <text class="card-title">今日运势</text>
          <text class="card-desc">根据生辰，自动生成今日建议，推荐穿搭</text>
        </view>
      </view>

      <!-- 风格分析卡片 -->
      <view class="feature-card">
        <view class="card-icon blue">
          <text class="icon-emoji">👓</text>
        </view>
        <view class="card-content">
          <text class="card-title">风格分析</text>
          <text class="card-desc">基于你的喜好，自动预测你的个人穿搭偏好</text>
        </view>
      </view>

      <!-- 场景搭配卡片 -->
      <view class="feature-card">
        <view class="card-icon purple">
          <text class="icon-emoji">👜</text>
        </view>
        <view class="card-content">
          <text class="card-title">场景搭配</text>
          <text class="card-desc">为不同场合提供时尚穿搭方案，随时保持完美</text>
        </view>
      </view>
    </view>

    <!-- 开始体验按钮 -->
    <view class="start-btn-container">
      <button class="start-experience-btn" @tap="startExperience">
        开始体验 <text class="arrow-icon">→</text>
      </button>
    </view>
    
    <!-- 底部导航 -->
    <view class="bottom-tabs" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <view class="tab-item" :class="{'active': activeTab === 0}" @tap="navSwitchTab(0)">
        <view class="tab-icon">🏠</view>
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item" :class="{'active': activeTab === 1}" @tap="navSwitchTab(1)">
        <view class="tab-icon">👚</view>
        <text class="tab-text">个人衣橱</text>
      </view>
      <view class="tab-item" :class="{'active': activeTab === 2}" @tap="navSwitchTab(2)">
        <view class="tab-icon">📋</view>
        <text class="tab-text">记录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { checkLogin, toLogin } from '@/libs/login.js';

export default {
  name: 'TimeSpaceWardrobe',
  components: {
  },
  data() {
    return {
      activeTab: 0,
      safeAreaBottom: 0
    };
  },
  onLoad() {
    // 获取底部安全区域高度
    this.getSafeAreaBottom();
    // 设置当前激活的标签
    this.activeTab = 0;
    
    // 验证登录状态
    this.checkLoginStatus();
  },
  onShow() {
    // 页面显示时也设置当前激活的标签
    this.activeTab = 0;
    
    // 验证登录状态
    this.checkLoginStatus();
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      if (!checkLogin()) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        toLogin();
        return;
      }
    },
    
    // 获取底部安全区域高度
    getSafeAreaBottom() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        this.safeAreaBottom = systemInfo.safeAreaInsets 
          ? systemInfo.safeAreaInsets.bottom 
          : 0;
      } catch (e) {
        console.error('获取安全区域失败', e);
      }
    },
    
    // 导航到首页
    navigateToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    
    // 开始体验按钮 - 导航到AI试穿界面
    startExperience() {
      // 先验证登录状态
      if (!checkLogin()) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        });
        toLogin();
        return;
      }
      
      // 登录验证通过后跳转
      uni.navigateTo({
        url: '/pages/AI_try_on/try_on_detail'
      });
    },
    
    // 切换底部标签
    navSwitchTab(tabIndex) {
      if (this.activeTab === tabIndex) return;
      
      this.activeTab = tabIndex;
      
      switch(tabIndex) {
        case 0: // 首页 - 当前页面，不需要跳转
          break;
        case 1: // 个人衣橱
          uni.switchTab({
            url: '/pages/AI_try_on/personal_wardrobe'
          });
          break;
        case 2: // 记录
          uni.switchTab({
            url: '/pages/AI_try_on/history'
          });
          break;
      }
    }
  }
}
</script>

<style lang="scss">
.wardrobe-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #ff99b4, #ffd6e7);
  padding: 30rpx;
  position: relative;
  padding-bottom: 120rpx; // 为底部导航留出空间
  display: flex;
  flex-direction: column;
  justify-content: center; // 整体居中
  
  .header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40rpx 0 20rpx; // 减少顶部和底部间距
    position: relative;
    
    // 返回首页按钮
    .home-btn {
      position: absolute;
      left: 20rpx;
      top: -80rpx;

      width: 60rpx;
      height: 60rpx;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
      z-index: 10;
      
      .home-icon {
        font-size: 32rpx;
        color: #ff5c8d;
      }
    }
    
    .logo-container {
      margin-bottom: 20rpx; // 减少间距
      
      .logo-circle {
        width: 120rpx;
        height: 120rpx;
        background: linear-gradient(135deg, #ff7eb3, #ff4d8d); // 渐变背景
        border-radius: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .logo-icon {
          font-size: 120rpx;
          color: #ffffff;
        }
      }
    }
    
    .title-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .main-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .sub-title {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  
  .feature-cards {
    margin-top: 30rpx; // 减少上边距
    margin-bottom: 30rpx; // 添加下边距
    flex: 0 auto; // 移除flex占比，使用自然高度
    display: flex;
    flex-direction: column;
    
    .feature-card {
      display: flex;
      background-color: rgba(255, 255, 255, 0.8); // 半透明白色
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      backdrop-filter: blur(10px); // 背景模糊效果
      
      .card-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        
        .icon-emoji {
          font-size: 40rpx;
        }
        
        &.pink {
          background: linear-gradient(135deg, #ffecf2, #ffb6d6); // 渐变背景
          color: #ff5c8d;
        }
        
        &.blue {
          background: linear-gradient(135deg, #e9f5ff, #b6d6ff); // 渐变背景
          color: #5c8dff;
        }
        
        &.purple {
          background: linear-gradient(135deg, #f1ebff, #d6b6ff); // 渐变背景
          color: #8d5cff;
        }
      }
      
      .card-content {
        flex: 1;
        
        .card-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }
        
        .card-desc {
          font-size: 24rpx;
          color: #999;
          line-height: 1.4;
        }
      }
    }
  }
  
  .start-btn-container {
    margin-top: 20rpx; // 减少按钮区域的上边距
    margin-bottom: 40rpx;
    
    .start-experience-btn {
      width: 100%;
      height: 90rpx;
      border-radius: 45rpx;
      background: linear-gradient(135deg, #ff7eb3, #ff4d8d); // 渐变背景
      color: #ffffff;
      font-size: 32rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6rpx 16rpx rgba(255, 92, 141, 0.3);
      
      .arrow-icon {
        margin-left: 10rpx;
      }
    }
  }
  
  .bottom-tabs {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9); // 半透明背景
    display: flex;
    border-top: 1px solid rgba(240, 240, 240, 0.5);
    backdrop-filter: blur(10px); // 背景模糊效果
    z-index: 100;
    
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 12rpx 0;
      
      .tab-icon {
        font-size: 44rpx;
        margin-bottom: 6rpx;
        color: #aaa;
      }
      
      .tab-text {
        font-size: 24rpx;
        color: #999;
      }
      
      &.active {
        .tab-icon {
          color: #ff5c8d;
        }
        
        .tab-text {
          color: #ff5c8d;
          font-weight: bold;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: linear-gradient(to right, #ff7eb3, #ff4d8d); // 渐变指示条
          border-radius: 2rpx;
        }
      }
    }
  }
}
</style> 